import React, { Component, Fragment } from 'react'
// import TodoItem from './TodoItem'
import store from './store'
import { changeInputValueAction, addItemAction, delItemAction, getSystemList } from './store/actionCreators'
import TodoListUI from './TodoListUI'

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = store.getState()
    this.storeChange = this.storeChange.bind(this)
    this.inputChange = this.inputChange.bind(this)
    this.addTodo = this.addTodo.bind(this)
    this.delTodo = this.delTodo.bind(this)
    store.subscribe(this.storeChange)
  }

  storeChange () {
    this.setState(store.getState())
  }

  inputChange (e) {
    const action = changeInputValueAction(e.target.value)
    store.dispatch(action)
  }
  addTodo () {
    const action = addItemAction()
    store.dispatch(action)
  }
  delTodo (index) {
    const action = delItemAction(index)
    store.dispatch(action)
  }


  componentDidMount () {
    const action = getSystemList()
    store.dispatch(action)
  }

  render () {
    return (
      <Fragment>
        <TodoListUI
          inputValue={this.state.inputValue}
          list={this.state.list}
          changeInputValue={this.inputChange}
          clickBtn={this.addTodo}
          deleteItem={this.delTodo}
        ></TodoListUI>
      </Fragment>
    )
  }
}
export default TodoList